<template>
	<div class="small-video-box">
		<!--<div class="small-page-back" @click="smallBack"></div>-->
		<div class="video-box" v-if="videoCoverImgIs">
			<div class="video-play-btn">
				<img v-show="videoInfo.imagUrl && videoInfo.imagUrl !=''" :src="videoInfo.imagUrl + '?x-oss-process=image/resize,m_fixed,h_424,w_750'"/>
				<div id="aliVideo" style="clear: both;"  @click="clickVideo"></div>
			</div>
		</div>
		<video controlslist="nodownload" ref="videoref" :poster="(videoInfo.imagUrl && videoInfo.imagUrl != '')? videoInfo.imagUrl :'none'" :src="videoInfo.video" webkit-playsinline="" playsinline="" controls="controls" width="100%"  style="object-fit: fill;">
			  <span>您的手机版本，网页版暂未能支持！</span>
		</video>

	</div>
</template>

<script>
	export default{
		data(){
			return{
				videoCoverImgIs:true,
				videoInfo:""
			}
		},
		created(){
			this.$store.dispatch("hideNav");
			this.videoInfo = this.$route.query.videoinfo;
			this.dotNum("smallVideoPlay_page"+this.videoInfo.id);
		},
		methods:{
			smallBack(){
				this.$router.push({
		             path: `/${this.$channel}/smallVideo`
		         });
			},
			dotNum(parame){//统计
				let _this = this;
				var argumentData = {
					sessionId: parame, //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource:fun.getPlatform(),//微信 app 游客为web
					url:window.location.href,//当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);
			},
			clickVideo(){
    		this.videoCoverImgIs = false;
    		this.$refs.videoref.play();
    		this.dotNum("smallVideoClickPlay_page"+this.videoInfo.id);
    	  },
		}
	}
</script>

<style scoped>
	.small-video-box{
		width: 100vw;
		height: 100vh;
		background: black;
	}
	.small-page-back{
		width: 65px;
		height: 55px;
		background: url(../assets/images/smallback.png) no-repeat;
		background-size: 65px  55px;
		float: left;
		margin: 50px 0 0 30px ;
	}
	video{
		width: 750px;
	     height: 424px;
		position: absolute;
		top: 350px;
		left: 0;
		z-index: 100;

	}
	.video-box{
		width: 750px;
		height: 424px;
		position: absolute;
		top: 350px;
		left: 0;
		z-index: 111;
	}
	#aliVideo{
		width: 130px;
		height: 130px;
		background: url(../assets/images/play.png) no-repeat;
		background-size: 130px 130px;
        position: absolute;
        top: 144px;
        left: 310px;
        z-index: 100;
	}
	.video-play-btn img{
		width: 750px;
		height: 424px;
    }
</style>
